<template>
	<!-- v-if="!isLock"-->
	<NConfigProvider :locale="zhCN" :theme="getDarkTheme" :theme-overrides="getThemeOverrides" :date-locale="dateZhCN">
		<AppProvider>
			<RouterView />
		</AppProvider>
	</NConfigProvider>

	<!--	  <transition v-if="isLock && $route.name !== 'login'" name="slide-up">-->
	<!--	    <LockScreen/>-->
	<!--	  </transition>-->
</template>

<script lang="ts" setup>
	import { computed, onMounted, onUnmounted } from 'vue';
	import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui';
	import { LockScreen } from '@/components/Lockscreen';
	import { AppProvider } from '@/components/Application';
	import { useLockscreenStore } from '@/store/modules/lockscreen';
	import { useRoute } from 'vue-router';
	import { useDesignSettingStore } from '@/store/modules/designSetting';
	import { lighten } from '@/utils';

	const route = useRoute();
	const useLockscreen = useLockscreenStore();
	const designStore = useDesignSettingStore();
	const isLock = computed(() => useLockscreen.isLock);
	const lockTime = computed(() => useLockscreen.lockTime);

	/**
	 * @type import('naive-ui').GlobalThemeOverrides
	 */
	const getThemeOverrides = computed(() => {
		const appTheme = designStore.appTheme;
		const lightenStr = lighten(designStore.appTheme, 0);
		return {
			common: {
				primaryColor: appTheme,
				primaryColorHover: lightenStr,
				primaryColorPressed: lightenStr,
			},
			Button: {
				textColor: appTheme,
			},
			LoadingBar: {
				colorLoading: appTheme,
			},
		};
	});

	const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));

	let timer;

	const timekeeping = () => {
		clearInterval(timer);
		if (route.name == 'login' || isLock.value) return;
		// 设置不锁屏
		useLockscreen.setLock(false);
		// 重置锁屏时间
		useLockscreen.setLockTime();
		timer = setInterval(() => {
			// 锁屏倒计时递减
			useLockscreen.setLockTime(lockTime.value - 1);
			if (lockTime.value <= 0) {
				// 设置锁屏
				useLockscreen.setLock(true);
				return clearInterval(timer);
			}
		}, 1000);
	};

	onMounted(async () => {
		document.addEventListener('mousedown', timekeeping);
	});

	onUnmounted(() => {
		document.removeEventListener('mousedown', timekeeping);
	});
</script>

<style lang="less">
	@import 'assets/styles/index.less';
</style>
